<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>HOPPINAI-黑神话悟空音乐播放器</title>
    <link href="https://hoppinzq.com/zui/static/css/font-awesome.css" rel="stylesheet">
    <link href="https://hoppinzq.com/wukong/normalize.min.css" rel="stylesheet">
    <link href="https://hoppinzq.com/static/css/plugins/swiper-bundle.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>
<body>
<audio id="player"></audio>
<div class="music-app">
    <div class="cover">
        <div class="cover-title user-detail"></div>
        <div class="artist"></div>
        <div class="input-box">
            <i class="fa fa-search"></i>
            <input class="music-search" placeholder="搜索音乐" type="text">
            <button class="button search_music">搜索</button>
        </div>
    </div>
    <div class="content">
        <div class="content-header">
            <span class="content-title">歌单</span>
        </div>
        <div class="album-list">
            <div class="brand-carousel">
                <div class="swiper-container">
                    <div class="swiper-wrapper album-player-list"></div>
                </div>
                <div class="swiper-button-prev common-swiper-button-prev">
                    <i class="las la-angle-left"></i>
                </div>
                <div class="swiper-button-next common-swiper-button-next">
                    <i class="las la-angle-right"></i>
                </div>
            </div>
        </div>
        <div class="content-header">
            <span class="content-title">歌曲列表</span>
            <button class="content-detail">我的喜欢</button>
        </div>
        <ul class="playlist"></ul>
    </div>
    <div class="player">
        <button class="btn btn-extend"></button>
        <span class="top-text" style="margin-bottom:0;">展开</span>
        <div class="player-top-content">
            <img alt="song" class="list-item-image song-image">
            <div class="list-item-info">
                <div class="info-title song-title"></div>
                <div class="info-subtitle song-subtitle"></div>
            </div>
            <div class="buttons-wrapper">
                <button class="btn btn-back fa fa-step-backward"></button>
                <button class="play-button fa fa-play" style="margin-right: 24px;"></button>
                <button class="btn btn-play-next fa fa-step-forward"></button>
            </div>
        </div>
        <div class="proggress-part">
            <span class="time time-play">00:00</span>
            <div class="proggres-bar proggres-music-bar">
                <span class="progress music-progress"></span>
            </div>
            <span class="time time-duration">00:00</span>
        </div>
    </div>
    <div id="play_list"></div>
    <div class="player-screen" style="padding: 4%;">
        <div class="screenShootBox"></div>
        <button class="btn btn-close btn-open-music" style="padding-top:5%"></button>
        <span class="top-text" style="margin-bottom:5%">返回音乐列表</span>
        <button class="top-text btn-danmu" data-state="1" style="margin-bottom:5%">隐藏弹幕</button>
        <!--        <button class="top-text btn-comment-open" style="margin-bottom:5%">打开评论列表</button>-->
        <div class="wyy-flip-card wyy-music" style="height: 26%">
            <div class="wyy-flip-card-inner">
                <div class="wyy-album-border wyy-flip-card-front">
                    <img class="music-covor-img"
                         src="https://p1.music.126.net/Dx-WKS3MWkQXMyDGjcTEdA==/109951168923586537.jpg?param=200y200"
                         style="width: 75%;height: 75%;">
                    <div class="wyy-album-shadow"></div>
                    <div class="wyy-visualizer">
                        <div class="wyy-circle"></div>
                        <div class="wyy-circle"></div>
                        <div class="wyy-circle"></div>
                        <div class="wyy-circle"></div>
                        <div class="wyy-circle"></div>
                        <div class="wyy-circle"></div>
                    </div>
                </div>
                <div class="wyy-album-back wyy-flip-card-back">
                    <img class="music-covor-img"
                         src="https://p1.music.126.net/Dx-WKS3MWkQXMyDGjcTEdA==/109951168923586537.jpg?param=200y200"
                         style="width: 75%;height: 75%;">
                    <!--                    <div class="wyy-album-back-text">-->
                    <!--                        <div id="wyy-lyrics" class="marquee" data-duration="166000" data-direction="up">-->
                    <!--                            <a href="javascript:void(0);"-->
                    <!--                               class="play-btn d-flex align-items-center justify-content-center text-center v-middle vid wyy-cp">-->
                    <!--                                <span class="text">年度</span>-->
                    <!--                                <span class="play-icon d-flex align-items-center justify-content-center text-center">-->
                    <!--											<i class="fa fa-music"></i>-->
                    <!--										<div class="icon-circle"></div></span>-->
                    <!--                                <span class="text">歌单</span>-->
                    <!--                            </a>-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                    <!--                    <div class="wyy-album-shadow"></div>-->
                </div>
            </div>
        </div>
        <div class="song-info" style="height: 8%;">
            <p class="song-title"></p>
            <p class="song-subtitle"></p>
        </div>
        <div class="divider" style="margin-top: 3%;margin-bottom: 3%"></div>
        <div class="bg-lyric" style="height: 18%"></div>
        <div class="music-control" style="height: 19%;">
            <div class="sound-bar">
                <button class="btn btn-volume-down"></button>
                <div class="proggres-bar volume">
                    <span class="progress volume_slide"></span>
                </div>
                <button class="btn btn-volume-up"></button>
            </div>
            <div class="action-bar">
                <button class="btn btn-repeat"></button>
                <button class="btn btn-back fa fa-step-backward"></button>
                <button class="btn btn-rewind fa fa-backward"></button>
                <button class="play-button fa fa-play"></button>
                <button class="btn btn-rewind-next fa fa-forward"></button>
                <button class="btn btn-play-next fa fa-step-forward"></button>
                <button class="btn btn-list btn-open-music"></button>
            </div>
            <div class="proggress-part">
                <span class="time time-play">00:00</span>
                <div class="proggres-bar proggres-music-bar">
                    <span class="progress music-progress"></span>
                </div>
                <span class="time time-duration">00:00</span>
            </div>
        </div>
    </div>
    <div class="comment-screen">
        <button class="btn btn-close btn-comment-close"></button>
        <span class="top-text">打开评论列表</span>
        <div class="box p-5 music-comments"></div>
        <div class="music-control">
            <div class="sound-bar">
                <button class="btn btn-volume-down"></button>
                <div class="proggres-bar volume">
                    <span class="progress volume_slide"></span>
                </div>
                <button class="btn btn-volume-up"></button>
            </div>
            <div class="action-bar">
                <button class="btn btn-repeat"></button>
                <button class="btn btn-back fa fa-step-backward"></button>
                <button class="btn btn-rewind fa fa-backward"></button>
                <button class="play-button fa fa-play"></button>
                <button class="btn btn-rewind-next fa fa-forward"></button>
                <button class="btn btn-play-next fa fa-step-forward"></button>
                <button class="btn btn-list btn-open-music"></button>
            </div>
            <div class="proggress-part">
                <span class="time time-play">00:00</span>
                <div class="proggres-bar proggres-music-bar">
                    <span class="progress music-progress"></span>
                </div>
                <span class="time time-duration">00:00</span>
            </div>
        </div>
    </div>
</div>
<div class="popup" id="popup_login" style="width: 230px">
    <div class="content">
        <div>
            <img alt="QR" id="qr_img" src="https://hoppinzq.com/wyy/static/picture/qr-login-34.png">
            <p id="wyy_tips">请使用网易云APP扫描上方二维码。若你在微信打开该网页，请保存图片，并使用网易云app扫描相册里的二维码</p>
        </div>
        <div class="list">
            <button class="muted" onclick="loadQr()">刷新二维码</button>
            <button onclick="closeLoginPopup()">关闭</button>
        </div>
    </div>
</div>

<div class="popup" id="popup_user" style="width: 230px">
    <div class="content">
        qweqweqwe
    </div>
</div>
<script src="https://hoppinzq.com/static/js/vendor/jquery-3.5.1.min.js"></script>
<script src="https://hoppinzq.com/static/js/plugins/localforage.js"></script>
<script src="https://hoppinzq.com/static/js/plugins/zjax.js"></script>
<script src="https://hoppinzq.com/static/js/plugins/swiper-bundle.min.js"></script>
<script src="https://hoppinzq.com/wukong/jquery-slimscroll.min.js"></script>
<script src="zqmusic.js"></script>
<script src="login.js"></script>
<script>

</script>
</body>
</html>
